<!--
 * @Author: 'zhangkeqq' '2211709169@qq.com'
 * @Date: 2025-07-31 15:25:45
 * @LastEditors: 'zhangkeqq' '2211709169@qq.com'
 * @LastEditTime: 2025-07-31 15:30:47
 * @FilePath: \vue3-admin-node\vue3-admin\src\views\operation_log\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  	<div class="table-wrapped">
  		<div class="table-top">
  			<div class="table-header">
  				<div>
  					<el-input v-model="name" class="w-50 m-2" size="large" placeholder="输入操作者进行搜索" :prefix-icon="Search"
  						@change="searchOperationPerson()" clearable @clear="getOperationFirstPageList" />
  				</div>
  				<div class="upload-wrapped">
  					<el-button type="danger" @click="clearList">清空操作日志</el-button>
  				</div>
  			</div>
  			<div class="table-content">
  				<el-table :data='tableData' style="width: 100%;">
  					<el-table-column prop="operation_person" label="操作者" >
  						<template #default="{row}">
  							<div :class="level(row.operation_level)">
  								<span class="person">{{row.operation_person}}</span>
  							</div>
  						</template>
  					</el-table-column>
  					<el-table-column prop="operation_content" label="操作内容" />
  					<el-table-column prop="operation_level" label="操作等级">
  						<template #default="{row}">
  							<el-tag class="ml-2" :type="level(row.operation_level)">{{row.operation_level}}</el-tag>
  						</template>
  					</el-table-column>
  					<el-table-column prop="operation_time" label="操作时间" width="200">
  						<template #default="{row}">
  							<div>{{row.operation_time?.slice(0,16)}}</div>
  						</template>
  					</el-table-column>
  
  				</el-table>
  			</div>
  		</div>
  		<div class="table-footer">
  			<el-pagination :page-size="1" :current-page="paginationData.operationCurrentPage" :pager-count="7"
  				:total="paginationData.operationTotal" :page-count="paginationData.operationPageCount"
  				@current-change="operationCurrentChange" layout="prev, pager, next" />
  		</div>
  	</div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
const name = ref()
	const level = (level:string) =>{
		if(level=='高级') return 'danger'
		if(level=='中级') return 'warning'
		if(level=='低级') return 'normal'
	}
const searchOperationPerson = ()=>{}
const getOperationFirstPageList = ()=>{}
const clearList = ()=>{}
const tableData = ref([])

const paginationData = reactive({
    operationCurrentPage:1,
    operationTotal:0,
    operationPageCount:5,
})
const operationCurrentChange = ()=>{}
</script>
<style>
@import url('@/assets/css/common.scss');
</style>
<style lang="scss" scoped>
    :deep(.el-table .cell) {
        font-weight: 400;
    }

    a {
        color: #fff;
        display: block;
        text-decoration: none;
    }
    
    .person{
        margin-left: 8px;
    }
    
    .danger{
        border-left: 2px solid red;
    }
    
    .warning{
        border-left: 2px solid yellow;
    }
    
    .normal{
        border-left: 0;
    }
</style>